<template>
<van-dialog
    class="cp_container"
    v-model="show" 
    title="虚拟号码" width="80%" 
    showConfirmButton
    closeOnClickOverlay>
    <van-list
        v-model="loading"
        :finished="finished"
        :error="error"
        error-text="请求失败"
        :finished-text="flattenTwoList(pageData).length==0?'什么也没找到':'没有更多了'"
        @load="getDataList"
        :immediate-check="false">
        <DataItem
            v-for="(item,index) in flattenTwoList(pageData)"
            :key="index"
            :index='index'
            :customerName="queryParams.customerName"
            :itemData="item">
        </DataItem>
    </van-list>
</van-dialog>
</template>
<script>
//数据详情组件
import {flattenTwoList} from "@/common/OtherTools";
import DataItem from "@/components/home/DataItem";
export default {
    name:"DataInfoDialog",
    components:{DataItem},
    data(){
        return {
            loading: false,
            show:false,
            finished:false,
            error:false,
            pageData:[],
            queryParams: {  //查询条件
                customerId:'',
                customerName:'',
                page: 0,
                size: 1000,
            },
        };
    },
    methods:{
        flattenTwoList,
        initData({show=true,customerId='',customerName=''}={}){
            this.pageData=[];
            this.queryParams.customerId=customerId;
            this.queryParams.customerName=customerName;
            this.getDataList();
            this.show = show;
        },
        getDataList(){
            this.queryParams.page++;
            this.error = false;
            this.loading = true;
            this.finished = false;
            this.$Api.getCustomerInfo(
                this.queryParams,
            ).then((res) => {
                let dataList = res.data.list;
                this.queryParams.page = res.data.page;
                this.$set(this.pageData,this.queryParams.page-1,dataList);  //索引必须是页数减一
                this.pageData.length = this.queryParams.page;  //数组的长度必须和页数对应
                this.total = res.data.totalSize;
                if(this.queryParams.page >= res.data.totalPage){  //如果是最后一页
                    this.finished = true;
                }
            }).catch(res=>{
                this.queryParams.page--;
                this.error = true;
                this.$notify({
                    type: 'danger',
                    message: res.msg,
                    duration: 1000,
                });
            }).finally(()=>{
                this.loading = false;
            });
        },
    },
}
</script>
<style lang='scss' scoped>
.cp_container{
    font-size: 17px;
    /deep/.van-dialog__content{
        max-height: 60vh;
        overflow: auto;
    }
    /deep/.van-list{
        padding: 15px;
        box-sizing: border-box;
        display: grid;
        grid-gap: 5px;
    }
}
</style>